<template>
  <h1>一个人的信息</h1>
  <h3>姓名: {{ person.name }}</h3>
  <h3>年龄:{{ person.age }}</h3>
  <button @click="hello">触发hello事件</button>
</template>

<script>
// https://www.bilibili.com/video/BV1Zy4y1K7SH?p=149&spm_id_from=pageDriver&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de

//2022 09 04 0:42
//https://www.bilibili.com/video/BV1Zy4y1K7SH?p=150&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de
/* 
 setup的两个注意点
    setup执行的时机
    在beforeCreate之前执行一次,this是undefined。
    setup的参数
    props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。
    context: 上下文对象
    attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于 this.$attrs .- slots:收到的插槽内容,相当于this.$slots .
    emit:分发自定义事件的函数,相当于this.$emit 。

*/
import { reactive } from "vue";
export default {
  name: "Demo",
  props: {
    msg: {
      type: String,
      default:''
    },
  },
  emits:['hello'],
  //未声明的情况下会有警告但是不影响使用
  beforeCreate(){
    console.log('---beforeCreate---');

  },
  setup(props,context) {
    console.log(props.msg,'---props---');
    console.log(context,'---context---');
    let person = reactive({
      name: "张三",
      age: 18,
    });
    let hello=()=>{
      context.emit('hello',9527)
    }
    return {
      person,
      hello,
    };
  },
};
</script>

<style scoped>

</style>